#home-buttons {
	h1 {
		text-align: center;
		text-transform: uppercase;
	}

	.row {
		display: flex;
		flex-wrap: wrap;

		> div {
			margin-top: 10px;
			@include media-breakpoint-up(md) {
				margin-top: 30px;
			};
		}
	}

	.button {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 1em;
		border-radius: $button-border-radius;
		background-color: $primary;
		@include shadow(3);
		@include animate();

		i {
			width: 1em;
			height: 1em;
			margin-right: 0.5em;
			font-size: 2.5em;
			flex-shrink: 0;
			color: $color-1;
			text-align: center;
		}

		h3 {
			margin-top: 0;
			color: $color-1;
		}

		&:hover {
			background-color: $color-2;
			@include shadow(4);
		}

		@include media-breakpoint-up(md) {
			flex-direction: column;

			i {
				font-size: 4em;
				margin-right: 0;
				margin-bottom: 0.2em;
			}

			h3 {
				text-align: center;
			}
		}
	}
}
